import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
import "swiper/swiper.scss";
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';
import 'swiper/components/scrollbar/scrollbar.scss';
import {url,topalbum} from '../../api'
import {axiosGet} from '../../axios'
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);

export default class playlistSwiper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      songList:''
    };
  }
  componentDidMount() {
      this.getSongLsit()
  }
  //  获取swiper的歌单列表
  getSongLsit(){
    axiosGet(url,topalbum,'limit=6').then(data=>{
        this.setState({
            songList:data.albums
        })
      }
  )
  }
  render() {
    let auto= { delay:0 }
    return (
      <div className="swiper-container">
        <div className="swiper-wrapper">
          <Swiper
          spaceBetween={-100}
           loop={true}
            slidesPerView={2}
            navigation
            pagination={{ clickable: true }}
            /* onSwiper={(swiper) => console.log(swiper)}
            onSlideChange={() => console.log('slide change')} */
            centeredSlides={true}
            speed={1000}
            autoplay={auto}
            initialSlide={2}
          >
            {this.state.songList &&
                this.state.songList.map((item,index)=>{
                    return(
                        <SwiperSlide  key={index}><img src={item.picUrl} alt=""></img></SwiperSlide>
                    )
                })
            }
          </Swiper>
        </div>
      </div>
    );
  }
}
